<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123123</div>
</body>
<script>
    // Javascript 如何解决异步问题?
    // 所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行;


    // 代码执行流程
    // (1) 同步任务立即执行, 异步任务进入进入任务队列
    // (2) 当所有同步任务执行完毕(前提),异步任务通知主线程, 某个异步任务可以执行了，该任务才会进入主线程执行


    // JS异步处理方案:
    // 回调函数 => 计时器和延时器 , 异步操作处理完毕,在执行对应的回调函数
    // 事件    => ajax  异步操作处理完毕之后, 触发事件


    // console.log("代码开始");
    // for (var i = 0; i < 4; i++) {
    //     setTimeout(() => {
    //         console.log("延时器代码执行", i);
    //     }, 1000);
    // }
    // console.log("代码结束",i);

    // console.log(1);
    // setTimeout(()=>{
    //     console.log(2);
    // },0);
    // console.log(3);



    
    console.log("代码开始");

    var xhr = new XMLHttpRequest();

    xhr.open("get", "../data/pro.json", true);

    xhr.send();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;

            console.log("请求结束");

        }

    }
    console.log("代码结束");
</script>
</html>